
    <template>
      <div class="container">
        <!-- 搜索条件区域 -->
        <van-cell-group inset>
          <!-- 城市选择 -->
          <van-cell
            title="城市"
            :value="selectedCity || '请选择城市'"
            is-link
            @click="showCityPicker = true"
          />
    
          <!-- 日期选择 -->
          <van-cell
            title="入住日期"
            :value="formatDate(checkInDate) || '请选择入住日期'"
            is-link
            @click="showDatePicker('checkIn')"
          />
          <van-cell
            title="离店日期"
            :value="formatDate(checkOutDate) || '请选择离店日期'"
            is-link
            @click="showDatePicker('checkOut')"
          />
        </van-cell-group>
    
        <!-- 酒店类型筛选 -->
        <van-radio-group v-model="hotelType" class="type-filter">
          <van-radio name="all">全部</van-radio>
          <van-radio name="hotel">酒店</van-radio>
          <van-radio name="homestay">民宿</van-radio>
        </van-radio-group>
    
        <!-- 搜索按钮 -->
        <div class="search-btn">
          <van-button type="primary" round block @click="handleSearch">立即搜索</van-button>
        </div>
    
        <!-- 酒店列表 -->
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <hotel-card v-for="hotel in hotelList" :key="hotel.id" :data="hotel" />
        </van-list>
    
        <!-- 弹出层 -->
        <van-popup v-model:show="showCityPicker" round position="bottom">
          <van-area :area-list="areaList" @confirm="onCityConfirm" @cancel="showCityPicker = false" />
        </van-popup>
        <van-popup v-model:show="showDatePickerVisible" round position="bottom">
          <van-date-picker
            :title="getDateTitle()"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onDateConfirm"
            @cancel="showDatePickerVisible = false"
          />
        </van-popup>
      </div>
    </template>
    
  
    <script setup>
import { ref, reactive } from 'vue';
import {
  CellGroup, Cell, Button, List, Popup, Area, DatePicker, RadioGroup, Radio
} from 'vant';
import HotelCard from '../utils/HotelCard.vue';
import { areaList } from '@vant/area-data';

// 响应式状态
const showCityPicker = ref(false);
const showDatePickerVisible = ref(false);
const currentDateType = ref('checkIn');
const loading = ref(false);
const finished = ref(false);

// 搜索条件
const selectedCity = ref('');
const hotelType = ref('all');
const checkInDate = ref(null);
const checkOutDate = ref(null);

// 日期范围限制
const minDate = new Date(2024, 0, 1);
const maxDate = new Date(2025, 11, 31);

// 模拟酒店数据
const hotelList = ref([]);
let mockId = 0;

// 日期格式化函数
const formatDate = (date) => {
  if (!date) return '';
  return `${date.getMonth() + 1}月${date.getDate()}日`;
};

// 获取日期选择器标题
const getDateTitle = () => {
  return currentDateType.value === 'checkIn' ? '选择入住日期' : '选择离店日期';
};

// 修改后的 onCityConfirm 方法
const onCityConfirm = (values) => {
  if (!Array.isArray(values) || values.length !== 3) {
    console.error('非标准三级数据', values);
    return;
  }
  selectedCity.value = values
    .map(level => level.text || '')
    .filter(text => text)
    .join('/');
};

// 处理日期选择
const showDatePicker = (type) => {
  currentDateType.value = type;
  showDatePickerVisible.value = true;
};

const onDateConfirm = (date) => {
  if (currentDateType.value === 'checkIn') {
    checkInDate.value = date;
  } else {
    checkOutDate.value = date;
  }
  showDatePickerVisible.value = false;
};

// 加载更多数据
const onLoad = () => {
  loading.value = true;
  setTimeout(() => {
    const newData = Array.from({ length: 10 }, () => ({
      id: mockId++,
      name: `酒店${mockId}`,
      price: Math.floor(Math.random() * 800) + 200,
      rating: (Math.random() * 2 + 3).toFixed(1),
      tags: ['可取消', '即时确认'][Math.floor(Math.random() * 2)],
      image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
    }));

    hotelList.value.push(...newData);
    loading.value = false;

    if (hotelList.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};

// 处理搜索
const handleSearch = () => {
  hotelList.value = [];
  finished.value = false;
  mockId = 0;
  onLoad();
};
</script>

  
  <style scoped>
  .container {
    padding: 12px;
    background: #f5f5f5;
    min-height: 100vh;
  }
  
  .type-filter {
    margin: 16px 0;
    padding: 12px;
    background: white;
    border-radius: 8px;
    
    :deep(.van-radio) {
      margin-right: 20px;
    }
  }
  
  .search-btn {
    margin: 20px 0;
  }
  
  .van-cell-group {
    margin-bottom: 12px;
  }
  </style>
  
